<!DOCTYPE html>
<html lang="zh">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>页面</title>
    <script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/loading.js"></script>
    <link href="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/theme-chalk/index.css" rel="stylesheet">

</head>
<style>
    .spacingFoot {
        height: 50px;
    }

    .spacing {
        margin-bottom: -36px;
    }

    table.gridtable {
        font-family: verdana, arial, sans-serif;
        font-size: 11px;
        color: #333333;
        border-width: 1px;
        border-color: #666666;
        border-collapse: collapse;
        width: 100%;
    }

    table.gridtable th {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #666666;
        background-color: #dedede;
        white-space: nowrap !important;
    }

    table.gridtable td {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #666666;
        background-color: #ffffff;
    }
</style>
<body>
<div id="app">
    <el-container v-loading="loading">
        <el-main>
        <el-header>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">订单管理</el-breadcrumb-item>
                <el-breadcrumb-item>订单信息</el-breadcrumb-item>
            </el-breadcrumb>
        </el-header>
            <el-form label-width="120px">
                <el-card class="box-card">
                    <span style="color:#43515a;font-family: PingFang SC">订单信息</span>
                    <el-row>
                    <#--<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="spacing">-->
                    <#--<h5 style="color: #909399">订单名称：<span style="color:#527c94cc">{{order_name}}</span></h5>-->
                    <#--</el-col>-->
                        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="spacing">
                            <h5 style="color: #909399">订单编号：<span style="color:#527c94cc">{{orderBill_id}}</span></h5>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="spacing">
                            <h5 style="color: #909399">创建时间：<span style="color:#527c94cc">{{crtTime}}</span></h5>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="spacing">
                            <h5 style="color: #909399">订单总额：<span style="color:#527c94cc">{{price}}</span></h5>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="spacing">
                            <h5 style="color: #909399">项目名称：<span style="color:#527c94cc">{{project_name}}</span></h5>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="spacing">
                            <h5 style="color: #909399">供应商联系人：<span style="color:#527c94cc">{{buyer}}</span></h5>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="spacing">
                            <h5 style="color: #909399">客户联系人：<span style="color:#527c94cc">{{user_name}}</span></h5>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="spacing">
                            <h5 style="color: #909399">客户名称：<span style="color:#527c94cc">{{userGroup_name}}</span></h5>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="spacing">
                            <h5 style="color: #909399">备注：<span style="color:#527c94cc" v-if="remark != 'null'">{{remark}}</span><span
                                    style="color:#527c94cc" v-else>未填写</span></h5>
                        </el-col>
                    </el-row>
                </el-card>
                <el-card class="box-card">
                    <span style="color:#43515a;font-family: PingFang SC">收货信息</span>
                    <el-row :gutter="20">
                        <el-col :span="24" class="spacing">
                            <h5 style="color: #909399">收货人：<span
                                    style="color:#527c94cc">{{consignee_information}}</span></h5>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="24" class="spacing">
                            <h5 style="color: #909399">收货地址及联系方式：<span style="color:#527c94cc">{{consignee_address}}</span>
                            </h5>
                        </el-col>
                    </el-row>
                <#--<el-row :gutter="20">-->
                <#--<el-col :span="8" class="spacing">-->
                <#--<h5 style="color: #909399">联系电话：<span style="color:#527c94cc" v-if="contact != 'null'">{{contact}}</span><span-->
                <#--style="color:#527c94cc" v-else>未填写</span></h5>-->
                <#--</el-col>-->
                <#--</el-row>-->
                </el-card>
                <br>
                <el-row>
                    <el-col>
                        <el-steps :active="1" simple>
                            <el-step title="SKU清单" icon="el-icon-info" style="margin-left:-8%"></el-step>
                        </el-steps>
                    </el-col>
                </el-row>
                <br>
                <el-table :data="tableData"
                          class="tb-edit"
                          style="width: 100%" highlight-current-row @row-click="handleCurrentChange"
                          tooltip-effect="dark" size="mini" border>
                    <el-table-column label="序号"
                                     type="index"
                                     width="50">
                    </el-table-column>
                    <el-table-column label="材料编码" prop="skuCode" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.skuCode" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="材料名称" prop="skuName" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.skuName" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="品牌" prop="skuBrand" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.skuBrand" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                <el-table-column label="型号" prop="skuModel" :show-overflow-tooltip=true>
                <#--<template scope="scope">-->
                <#--<el-input size="small" v-model="scope.row.skuModel" :disabled="true"></el-input>-->
                <#--</template>-->
                </el-table-column>
                    <el-table-column label="单位" prop="skuUnit" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.skuUnit" placeholder="请输入内容"-->
                    <#--@change="handleEdit(scope.$index, scope.row)" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="规格参数" prop="modelAndParam" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.modelAndParam" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="预计到货时间" prop="arriveTime" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.arriveTime" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="单价" prop="skuPrice" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.skuPrice" placeholder="请输入内容"-->
                    <#--@change="handleEdit(scope.$index, scope.row)" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="数量" prop="purNum" :show-overflow-tooltip=true>

                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.purNum" placeholder="请输入内容"-->
                    <#--@change="handleEdit(scope.$index, scope.row)" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="备注" prop="sku_remark" :show-overflow-tooltip=true>
                    </el-table-column>
                </el-table>
                <br><br>
                <el-row>
                    <el-col :xs="24" :sm="16" :md="14" :lg="8" :xl="8" class="spacingFoot">
                        <el-form-item label="订单总额：">
                            <span style="color:#F56C6C;font-size: 20px">￥{{sumPrice}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <#--<el-row>-->
                    <#--<el-col :xs="16" :sm="16" :md="14" :lg="8" :xl="8" class="spacingFoot">-->
                        <#--<el-form-item label="运费：">-->
<#--<#if success == "success">-->
    <#--<el-input :disabled="orderBill_customStat!=1000" v-model="transport_price" style="width:50%"-->
              <#--@keydown.native="inputLimit"></el-input>-->
<#--<#else>-->
<#--<span style="color:#F56C6C;font-size: 20px">￥{{transport_price}}</span>-->
<#--</#if>-->
                        <#--</el-form-item>-->
                    <#--</el-col>-->
                <#--</el-row>-->
                <#--<el-row>-->
                    <#--<el-col :xs="16" :sm="16" :md="14" :lg="8" :xl="8" class="spacingFoot">-->
                        <#--<el-form-item label="优惠：">-->
<#--<#if success == "success">-->
    <#--<el-input :disabled="orderBill_customStat != 1000" v-model="discount" style="width:50%"-->
              <#--@keydown.native="inputLimit"></el-input>-->
<#--<#else>-->
<#--<span style="color:#F56C6C;font-size: 20px">￥{{discount}}</span>-->
<#--</#if>-->
                        <#--</el-form-item>-->
                    <#--</el-col>-->
                <#--</el-row>-->
                <#--<el-row>-->
                    <#--<el-col :xs="24" :sm="16" :md="14" :lg="8" :xl="8" class="spacingFoot">-->
                        <#--<el-form-item label="订单总额：">-->
                            <#--<span style="color:#F56C6C;font-size: 20px">￥{{salesOrderPrice}}</span>-->
                        <#--</el-form-item>-->
                    <#--</el-col>-->
                <#--</el-row>-->

                <el-form-item>
                <#--<#if success == "success">-->
                    <#--<el-button type="primary" @click="submitForm()" v-if="orderBill_customStat==1000">确认修改</el-button>-->
                <#--</#if>-->
                    <a href="/order/orderList.page">
                        <el-button>返回</el-button>
                    </a>
                </el-form-item>

            </el-form>
        </el-main>
    </el-container>

</div>
</body>
</html>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/dist/vue.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/index.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/publiccss/assets/global/plugins/jquery.min.js"
        type="text/javascript"></script>
<script>
    //限制最多输入两位小数
    let inputLimit = function (e) {
        let num = e.target.value || ''
        let code = e.which || e.keyCode
        let str = (e.key && e.key != 'Unidentified') ? e.key : num.substr(num.length - 1)
        //无论任何情况，皆可执行
        if (code == '8') {
            return true
        }
        //没有满足任何一种情况，中断执行
        if (!(/[\d.]/.test(str) || code == '190')) {
            e.returnValue = false
            return false
        }
        if (num.length > 12 ||
                (num.indexOf('.') >= 0 && code == '190') ||
                ((num.indexOf('.') == num.length - 3) && num.length > 3) ||
                (num.length == 0 && code == '190')) {
            e.returnValue = false
            return false
        }
        return true

    }
    new Vue({
        el: '#app',
        data() {
            return {
                loading:false,
                user_id: '',
                user_name: '',
                orderBill_customStat: "",
                order_name: "",
                orderBill_id: "${orderNo}",
                crtTime: "",
                price: "",
                buyer: "",
                remark: "",
                consignee_information: "",
                consignee_address: "",
                project_name:'',
                contact: "",
                userGroup_name: "",
                tableData: [],
                response_data: "",
                sku_sum_price: 0,
                transport_price: 0,//运费价格
                discount: 0,//优惠价格
                sales_order_price: 0,
                //当前页
                currentPage: 1,
                //每页数量
                pagesize: 10,
                orderBill_customStat: '',
                //总页数
                total: "",
                orderBean_pk: '${orderBean_pk}',
            }
        },
        //实时计算
        computed: {
            //计算商品总额
            sumPrice() {
                let sumPrice = 0;
                this.tableData.forEach((item) => {
                    sumPrice += Number(item.skuPrice) * Number(item.purNum);
                });
                sumPrice = sumPrice.toFixed(2);
                this.sku_sum_price = sumPrice;
                this.sales_order_price = sumPrice;
                return sumPrice;
            },
            //计算订单总额
            // salesOrderPrice() {
            //     let salesOrderPrice = 0;
            //     salesOrderPrice = Number(this.sku_sum_price) + Number(this.transport_price) - Number(this.discount);
            //     this.sales_order_price = salesOrderPrice.toFixed(2);
            //     return salesOrderPrice;
            // },

        },
        methods: {
            inputLimit: inputLimit,
            handleSizeChange(val) {
                this.pagesize = val;
            },
            CurrentChange(val) {
                // this.currentPage = val;
            },
            handleCurrentChange(row, event, column) {
                // console.log(row, event, column, event.currentTarget)
            },
            handleEdit(index, row) {
                // console.log(index, row);
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },

            <#if success == "success">
            submitForm() {
                var transport_price = this.transport_price;
                var discount = this.discount;
                var price = this.sales_order_price;
                var orderNo = this.orderBill_id;
                var orderBean_pk = this.orderBean_pk;
                var boolean = false;
                var msg = "";
                if (transport_price >= 0 && discount >= 0) {
                    if (!Number.isNaN(price)) {
                        if (price > 0) {
                            $.ajax({
                                url: '/order/updateOrder.json',
                                type: 'POST',
                                data: {
                                    orderNo: orderNo,
                                    price: price,
                                    transport_price: transport_price,
                                    discount: discount
                                    orderBean_pk: orderBean_pk,
                                },
                                async: false,
                                dataType: 'json',
                                success: function (result) {
                                    boolean = result.ret;
                                    if (!boolean) {
                                        msg = result.msg;
                                    }
                                }
                            });
                            if (boolean) {
                                this.$message({
                                    message: '修改成功',
                                    type: 'success'
                                });
                                setTimeout(function () {
                                    window.location.href = "/order/orderList.page";
                                }, 1000);
                            } else {
                                this.$message.error(msg);
                            }
                        } else {
                            this.$message.error('订单金额不能小于0');
                        }
                    } else {
                        this.$message.error('请输入数字值');
                    }
                } else {
                    this.$message.error('运费和优惠金额都不能小于0哦');
                }
            },
            </#if>
            ajaxFunction() {
                var resultData = "";
                this.loading=true
                $.ajax({
                    url: '/order/orderDetail.json',
                    type: 'POST',
                    data: {orderNo: this.orderBill_id, orderBean_pk: this.orderBean_pk},
                    // contentType: "application/json",
                    // async: false,
                    dataType: 'json',
                    success: (result) => {
                        if (result.ret) {
                            resultData = result.data;//数据记录
                        }
                        this.orderBill_customStat = resultData.orderBill_customStat;
                        this.showDetailMsg(resultData);
                        this.loading=false;

                    }
                    // success: function (result) {
                    //     if (result.ret) {
                    //         resultData = result.data;//数据记录
                    //     }
                    // }
                });
                // this.orderBill_customStat = resultData.orderBill_customStat;
                // this.showDetailMsg(resultData);
            },
            showDetailMsg(resultData) {
                this.response_data = resultData;
                this.order_name = resultData.order_name;
                this.orderBill_id = resultData.orderBill_id;
                this.orderBean_pk = resultData.orderBean_pk;
                this.crtTime = resultData.crtTime;
                this.orderBill_customStat = resultData.orderBill_customStat;
                this.price = resultData.price;
                this.userGroup_name = resultData.userGroup_name;
                this.project_name = resultData.project_name;
                this.buyer = resultData.buyer;
                this.remark = resultData.remark;
                this.consignee_information = resultData.consignee_information;
                this.consignee_address = resultData.consignee_address;
                this.transport_price = resultData.transport_price;//运费
                this.discount = resultData.discount;//折扣
                this.contact = resultData.consignee_phone;
                var orderDetailList = resultData.context;
                var arr_table = new Array();
                for (var i = 0; i < orderDetailList.length; i++) {

                    var map = orderDetailList[i];
                    var obj_table = new Object();
                    obj_table.skuCode = map.sku_code;
                    obj_table.skuName = map.sku_name;
                    obj_table.skuBrand = map.sku_brand;
                    obj_table.skuModel = map.sku_model;
                    obj_table.skuUnit = map.sku_unit;
                    obj_table.modelAndParam = map.sku_slug_set;
                    obj_table.arriveTime = map.arriveTime;
                    obj_table.skuPrice = map.sku_contract_price;
                    obj_table.purNum = map.purNum;
                    obj_table.supplyCycle = map.supplyCycle;
                    obj_table.sku_remark = map.sku_remark;
                    arr_table.push(obj_table);
                }
                this.tableData = arr_table;
                this.user_id = resultData.user_id;
                var user_name = this.user_name;
                $.ajax({
                    url: '/user/queryUser',
                    type: 'get',
                    data: {userId: resultData.user_id},
                    // contentType: "application/json",
                    async: false,
                    dataType: 'json',
                    success: function (result) {
                        user_name = result.user_name;
                    }
                });
                this.user_name = user_name;
            }
        },
        /** 初始化参数的时候使用 */
        async mounted() {
            this.ajaxFunction();

        }
    });

</script>
<#--<script type="text/javascript" src="/base/js/salesOrderDetail.js"></script>-->


